<template>
	<view class="afterSales-selector-type">
		<view class="row-1">
			<image
				:src="realmName + pageData.goodsPic"
				mode="aspectFill" class="image"></image>
			<view class="text">{{pageData.goodsName}}</view>
		</view>
		<view class="row-2">
			<view class="item" v-for="item in listData" :key="item.afterSalesType" @click="handleSubmit(item)">
				<view class="left">
					<image :src="item.image" mode="aspectFill" class="image"></image>
					<view class="text">{{item.text}}</view>
				</view>
				<view class="right">
					<u-icon name="arrow-right" size="18" color="#CCCCCC"></u-icon>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	import { realmName } from "@/http";
	export default {
		data() {
			return {
				realmName,
				value1: "",
				pageData:{},
				listData: [{
						image: "",
						text: "退款",
						afterSalesType: 2
					},
					{
						image: "",
						text: "退货",
						afterSalesType: 1
					},
					// {
					// 	image: "",
					// 	text: "换货",
					// 	afterSalesType: 3
					// }
				]
			}
		},
		onLoad() {
			this.pageData = uni.getStorageSync('PAGE_DATA');
			console.log("this.pageData",this.pageData);
		},
		methods: {
			handleSubmit(options) { //提交内容
				uni.redirectTo({
					url:"/culturalCreativity/common/afterSalesReason?afterSalesType="+options.afterSalesType
				});
			}
		}
	}
</script>
<style lang="scss" scoped>
	.afterSales-selector-type {
		.row-2 {
			background: #FFFFFF;
			border-radius: 30rpx;
			padding: 0 32rpx;
			margin-top: 24rpx;
			.left {
				display: flex;
				align-items: center;

				.image {
					width: 48rpx;
					height: 48rpx;
					margin-right: 20rpx;
				}

				.text {
					font-size: 30rpx;
					font-weight: 500;
					color: #1F1F1F;
				}
			}

			.item {
				height: 148rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
			}
		}

		.row-1 {
			width: 100%;
			box-sizing: border-box;
			padding: 0 32rpx;
			height: 200rpx;
			background: #FFFFFF;
			border-radius: 0rpx 0rpx 30rpx 30rpx;
			display: flex;
			align-items: center;

			.image {
				width: 120rpx;
				height: 120rpx;
				border-radius: 16rpx;
				margin-right: 24rpx;
			}

			.text {
				width: 542rpx;
				font-size: 24rpx;
				font-weight: 400;
				color: #1F1F1F;
			}
		}

		&::after {
			content: "";
			position: fixed;
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;
			z-index: -1;
			background-color: #F7F7F7;
		}
	}
</style>
